<template>
	<view class="mine">
		<u-navbar placeholder :safeAreaInsetTop="true" bgColor="#1E2020" titleStyle="color:#fff;"
			leftIconColor="#FFFFFF">
		</u-navbar>
		<view class="userinfo">
			<view class="user">
				<u-avatar :src="userInfo.portrait" :size="50" style="margin-left: calc(50% - 25px);"
					@tap="toPage('/pages/UserInfo/index')"></u-avatar>
				<view class="cont">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="name1"><text class="name1_num">18</text>在售<text class="name1_num">18</text>售出</view>
					<view class="address dfc">{{userInfo.introduce}}</view>
				</view>
			</view>
		</view>
		<view class="collect">
			<u-sticky :offset-top="top">
				<u-tabs :list="tabs" :current="isActive" :activeStyle="{color:'#000',fontSize:'30rpx',fontWeight:'600'}"
					:inactiveStyle="{color:'#c1c1c1'}" lineWidth='20' lineColor="#000" @change="changeTab"></u-tabs>
			</u-sticky>
			<view v-if="isActive==0">
				<view class="cont">
					<block v-for="item in list0" :key="item">
						<view class="item fadeInUp" @tap="toPage(`/subpage/Collection/details?id=${item.goods_id}`)">
							<view class="ts">{{item.sell_status==1?'转售中':'藏品'}}</view>
							<view class="boximg">
								<image class="pic" :src="item.thumb" mode="widthFix"></image>
							</view>
							<view class="tys">
								<text class="txt">{{item.goods_special_type_name}}</text>
								<text class="txt">艺术</text>
							</view>
							<view class="item_cont">
								<view class="info">
									<view class="name">{{item.title||'疯传数藏'}}</view>
									<view class="price">
										￥{{item.price}}
									</view>
								</view>

								<!--<view class="tag dfc">
								<image src="@/static/images/eth.png" mode="aspectFit"></image>
								<text>ETH{{item.chain_mark}}#{{item.goodsCode}}/{{item.allCount}}</text>								
							</view>-->
								<!-- 				<view class="bhbfg">
								<text></text>
							</view> 
							<view class="issued">Time 数藏</view>-->
								<view class="issued">
									<view class="user" style="displayflex; flex-direction: row;">
										<u-avatar size="20" :src="item.portrait"></u-avatar>
										<text style="color: #222;">{{item.nickname}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 我的藏品 -->
			<view>
				<view class="cont" v-if="isActive==1">
					<block v-for="item in list" :key="item.goods_id">
						<view class="item fadeInUp" @tap="toPage(`/subpage/Collection/details?id=${item.goods_id}`)">
							<view class="ts">{{item.sell_status==1?'转售中':'藏品'}}</view>
							<view class="boximg">
								<image class="pic" :src="item.thumb" mode="widthFix"></image>
							</view>
							<view class="tys">
								<text class="txt">{{item.goods_special_type_name}}</text>
								<text class="txt">艺术</text>
							</view>
							<view class="item_cont">
								<view class="info">
									<view class="name">{{item.title||'疯传数藏'}}</view>
									<view class="price">
										￥{{item.price}}
									</view>
								</view>
								<view class="issued">
									<view class="user" style="displayflex; flex-direction: row;">
										<u-avatar size="20" :src="item.portrait"></u-avatar>
										<text style="color: #222;">{{item.nickname}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<block v-if="total<1 && isActive == 0">
					<Empty text="暂无藏品"></Empty>
				</block>
				<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
					已经到底了
				</view>
				<view class="Isend" @click="myGoodsList" v-else-if="list.length<this.total">
					下拉加载更多
				</view>
			</view>
			<!-- 我的盲盒 -->
			<view v-if="isActive==2" class="box">
				<view class="item" @click="lookbox(item.id,item)" v-for="(item,i) in list1" :key="i">
					<view class="ts">盲盒未拆</view>
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="item_top">{{item.title}}</view>
					<view class="item_bottom">内有{{item.blindbox_count}}款藏品</view>
				</view>
			</view>
			<block v-if="total1<1&&isActive == 1">
				<Empty text="暂无盲盒"></Empty>
			</block>

		</view>

		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="show">
				<view class="show_top">
					<view class="show_title">{{actObj.title}}</view>
					<image :src="actObj.img" mode="aspectFit" class="showimg"></image>
					<view class="show_but" @click="chaibox(actObj.id)">
						立即拆开盲盒
					</view>
					<view class="show_tip">
						<!-- 打开有几率获得：猫猫，狗狗，熊熊，虎虎 -->
					</view>
				</view>
				<view class="show_close" @click="show=false">
					<image src="@/static/images/comimg/close.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="center" bgColor="transparent" @close="page1=1;mymangGoodsList();">
			<view class="show">
				<view class="show_top">
					<view class="show_title1">恭喜你获得</view>
					<view class="show_title">{{box.title}}</view>
					<image :src="box.thumb" mode="aspectFill" class="showimg"></image>
					<view class="show_but" @click="next">
						继续拆开盲盒
					</view>
					<view class="show_tip">

					</view>
				</view>
				<view class="show_close" @click="show1=false">
					<image src="@/static/images/comimg/close.png"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				box: {}, //拆除来的盲盒
				actObj: {},
				top: 0,
				page: 1,
				size: 10,
				list: [],
				total: 0,
				page1: 1,
				size1: 10,
				list1: [],
				total1: 0,
				isActive: 0,
				list0: [],
				tabs: [
					{name: "藏品"},
					// {name: "盲盒"},
				],
				show: false,
				show1: false,
			}
		},
		onShow() {
			this.page = 1
			this.page1 = 1
			this.getUser()
			if (this.isActive == 0) {
				this.myGoodsList();
			} else {
				this.mymangGoodsList();
			}
		},
		onLoad() {
			uni.hideTabBar()


		},
		computed: {
			...mapState(['userInfo', 'token'])
		},
		onPullDownRefresh() {
			this.getUser()
			// localStorage.setItem('isActive',e);
			if (this.isActive == 1) {
				this.page = 1
				this.myGoodsList();
			} else {
				this.page1 = 1
				this.mymangGoodsList();
			}
			// this.myGoodsList()
		},
		onReachBottom() {
			console.log('[触底]')
			if (this.isActive == 1) {
				this.myGoodsList();
			} else {
				this.mymangGoodsList();
			}
		},
		filters: {
			yingcang(val) {
				if (val) {
					let a = val.replace(/(\w{4})\w+(\w{4})/, "$1...$2");
					return a;
				} else {
					return "...";
				}
			},
		},
		methods: {
			jqqd() {
				this.$u.toast("敬请期待")
			},
			lookbox(id, item) {
				this.show = true;
				this.actObj = item;
				// this.$http({
				// 	url:this.$api.readmang,
				// 	method: 'POST',
				// 	hideLoading: true,
				// 	needToken:true,
				// 	data:{
				// 		id:id
				// 	}
				// }).then((res)=>{
				// 	console.log(res);
				// }).catch((err)=>{
				// 	console.log(err);
				// })

			},
			//继续拆
			next() {
				this.page1 = 1
				this.mymangGoodsList();
				this.show1 = false
			},
			chaibox(id, j) {
				if (j == 'continue') {

				} else {

				}
				this.$http({
					url: this.$api.openmang,
					method: 'POST',
					hideLoading: false,
					needToken: true,
					data: {
						id: id
					}
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.box = res.data
						this.show = false;
						this.show1 = true;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				}).catch((err) => {
					console.log(err);
				})
				// setTimeout(()=>{
				// 	this.show1=true;
				// },0)
			},
			openmangfun(id) {

			},
			changeTab(e) {
				if (e.index != this.isActive) {
					this.isActive = e.index
					if (this.isActive == 0) {
						this.page = 1
						this.myGoodsList();
					} else {
						this.page1 = 1
						this.mymangGoodsList();
					}
				}
			},
			checked(e) {
				this.isActive = e;
				// localStorage.setItem('isActive',e);
				if (e == 1) {
					this.page = 1
					this.myGoodsList();
				}
				if (e == 0) {
					this.page = 1;
					this.page1 = 1;
					this.myGoodsList();
					this.mymangGoodsList();
				} else {
					this.page1 = 1
					this.mymangGoodsList();
				}
			},
			//复制
			copy() {
				uni.setClipboardData({
					data: this.userInfo.account_address,
					showToast: false,
					success: () => {
						console.log('success');
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			async getUser() {
				let data = await this.$http({
					url: this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {}
				})
				console.log('[用户信息]', JSON.stringify(data))
				if (data.code == 200) {
					this.$store.commit('ChangeUserInfo', data.data);
					// this.myGoodsList()
				}
			},
			//我的藏品
			async myGoodsList() {
				let data = await this.$http({
					url: this.$api.myGoodsList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				console.log('[我的藏品]', JSON.stringify(data))
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
						this.list0.concat(data.data.data);
					}
					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data.data)
						this.page += 1
					}
				}
			},
			//我的盲盒
			async mymangGoodsList() {
				let data = await this.$http({
					url: this.$api.mymangGoodsList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page1,
						page_size: this.size1,
					}
				})
				console.log('[我的盲盒]', JSON.stringify(data))
				if (data.code == 200) {
					if (this.page1 == 1) {
						this.list1 = [];
						this.list0.concat(data.data.data);
					}
					this.total1 = data.data.total
					if (this.list1.length < data.data.total) {
						this.list1 = this.list1.concat(data.data.data)
						this.page1 += 1
					}
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// /deep/.u-mode-center-box
	/deep/.u-popup__content[data-v-52d4ddd1] {
		background-color: transparent !important;
	}

	.Isend {
		font-size: 28rpx;
		font-weight: 400;
		color: #808080;
		line-height: 36rpx;
		text-align: center;
		margin: 16rpx;
	}

	.mine {
		min-height: calc(100vh - 60rpx);
		background-color: $nft-page-bg-color;

		.mine_top_top_right {
			.img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}
		}

		.show {
			// height: 735rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			background: transparent;

			.show_top {
				width: 634rpx;
				height: 715rpx;
				background: #FFF;
				border-radius: 20rpx;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				display: flex;
				padding: 20rpx;

				.show_title1 {
					font-size: 38rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #F2CAA6;
					line-height: 36rpx;
					margin-bottom: 31rpx;
					margin-top: 30rpx;
				}

				.show_title {
					font-size: 56rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;

				}

				.showimg {
					width: 314rpx;
					height: 314rpx;
					background: #FFFFFF;
					border-radius: 50rpx;
					margin: 51rpx 0 34rpx 0;
				}

				.show_but {
					width: 273rpx;
					height: 74rpx;
					background: #000;
					color: #FFF;
					border-radius: 37rpx;
					text-align: center;
					line-height: 74rpx;
				}

				.show_tip {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;
					line-height: 18px;
					margin-top: 48rpx;
				}
			}

			.show_close {
				margin-top: 26rpx;
				width: 58rpx;
				height: 59rpx;

				image {
					// width: 58rpx;
					// height: 59rpx;
					// background:pink;
					// margin:0 auto;
					width: 100%;
					height: 100%;

				}
			}
		}

		.userinfo {
			background-color: #222222;
			padding-bottom: 30rpx;
			border-radius: 0rpx 0rpx 30rpx 30rpx;

			.user {
				flex-direction: column;
				text-align: center;

				.cont {
					.name {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						margin-top: 20rpx;
					}

					.name1 {
						font-size: 26rpx;
						font-weight: 500;
						color: #c1c1c1;
						line-height: 26rpx;
						margin-top: 10rpx;

						.name1_num {
							color: #FFF;
							font-weight: 600;

							&:nth-child(2) {
								margin-left: 40rpx;
							}
						}
					}

					.address {
						margin-top: 12rpx;
						font-size: 24rpx;
						font-weight: 500;
						margin: 25rpx 50rpx;
						color: #FFF;

						text {}

						.copy {
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 4rpx;
							margin-left: 12rpx;
							background: url(@/static/images/share/fz.png)center/cover no-repeat;
						}
					}
				}
			}
		}

		.tabs {
			box-sizing: border-box;
			padding: 30rpx 70rpx;
			background-color: #FFF;
			border-radius: 8px;
			margin: 0rpx 28rpx 0rpx 44rpx;
			box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
			margin-top: -70rpx;

			.item {
				text-align: center;
				position: relative;
				min-width: 80rpx;
				width: 150rpx;

				// border:1px solid #fff;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #8C8C8C;
				}

				&:nth-child(1) {
					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				&:nth-child(2) {
					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				&:nth-child(3) {
					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				&:nth-child(4) {
					image {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}

		.tabs1 {
			background: red;
			padding: 30rpx;
			background-color: #000000;

			.item {
				text-align: center;
				position: relative;
				min-width: 80rpx;
				width: 150rpx;

				// border:1px solid #fff;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #8C8C8C;
				}

				&:nth-child(1) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				&:nth-child(2) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				&:nth-child(3) {
					image {
						width: 38rpx;
						height: 42rpx;
					}
				}

				&:nth-child(4) {
					image {
						width: 38rpx;
						height: 10rpx;
					}
				}
			}
		}

		.collect {
			padding: 10rpx 0rpx 0rpx 10rpx;
			background: #F5F5F5;

			.tf-Box-Bg {
				padding: 20rpx 30rpx;
			}

			.collect_title {
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 44rpx;
				margin-bottom: 26rpx;
			}

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #C1C1C1;

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #C1C1C1;
						// margin-right:33rpx;
						display: inline-block;
						width: 110rpx;
						height: 60rpx;
						background: transparent;
						text-align: center;
						line-height: 60rpx;
					}

					.active {
						color: #000;
						border-radius: 4px;
						background: #DDD;
						;
					}
				}

				.title_right {
					width: 102rpx;
					height: 48rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #000;
					background: #DDDDDD;
					border-radius: 100px;
				}

			}

			.title {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				background: #00000000;
				border-radius: 8rpx;

				span {
					font-size: 24rpx;
					font-weight: bold;
					color: #c1c1c1;
					display: inline-block;
					width: 110rpx;
					height: 60rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.active {
					color: #fff;
					background: #898989;
				}
			}

			.cont {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.item {
					width: calc(50% - 10rpx);
					background: #FFF;
					box-shadow: 2px 2px 8px 3px rgba(230, 230, 230, 0.5);
					border-radius: 28rpx;
					font-size: 0;
					margin-right: 16rpx;
					margin-bottom: 26rpx;
					position: relative;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.boximg {
						width: 100%;
						height: 346rpx;
						overflow: hidden;
						background: url(@/static/images/shopbg.png) no-repeat;
						background-size: cover;
					}

					.pic {
						width: 100%;
						height: 346rpx;
						border-radius: 28rpx 28rpx 0 0;
					}

					.item_cont {
						padding: 16rpx 16rpx 14rpx 16rpx;

						.info {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								font-size: 28rpx;
								font-weight: 600;
								color: #000;
								flex: 1;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}

							.price {
								font-size: 32rpx;
								font-weight: bold;
								color: #000;
								line-height: 38rpx;
							}
						}

						.tag {
							margin-top: 12rpx;
							padding: 6rpx 16rpx;
							background: #FAEAC5;
							border-radius: 8rpx;
							overflow: hidden;

							image {
								width: 36rpx;
								height: 32rpx;
								margin-right: 10rpx;
							}

							text {
								width: calc(100% - 36rpx);
								font-size: 20rpx;
								font-weight: 600;
								color: #6B5931;
							}
						}

						.bhbfg {
							margin-top: 15rpx;
							background: #FAEAC5 url('/static/images/share/bhbg.png') no-repeat;
							background-size: 100% 100%;
							background-position: 10rpx;
							width: calc(100% - 70rpx);
							border-radius: 8rpx;
							height: 56rpx;
							font-size: 22rpx;
							font-weight: 600;
							color: #6B5931;
							padding-left: 69rpx;
							display: flex;
							align-items: center;
						}

						.issued {
							margin-top: 14rpx;
							font-size: 24rpx;
							font-weight: 600;
							color: #8C8C8C;
							padding: 0 6rpx;
						}
					}

				}
			}

			.box {
				// min-height:100vh;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				// justify-content: space-between;
				align-items: left;
				padding: 10rpx 30rpx;
				width: 100%;

				.item {
					width: calc(50% - 45rpx);
					height: 439rpx;
					background: #FFF;
					border-radius: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: left;
					position: relative;
					margin-top: 20rpx;

					// border: 1px solid #007AFF;
					image {
						width: 100%;
						height: 323rpx;
						background: #FAEBCC;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
					}

					.item_top {
						text-align: left;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 600;
						color: #000;
						padding-left: 33rpx;
						padding-right: 33rpx;
						// line-height: 36rpx;
						margin-top: 16rpx;
					}

					.item_bottom {
						text-align: left;
						color: #222;
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						padding-left: 33rpx;
						padding-right: 33rpx;
						margin-top: 17rpx;
					}
				}

				.item:nth-child(even) {
					margin-left: 27rpx;
				}
			}

			.ts {
				min-width: 90rpx;
				height: 48rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 24rpx;
				opacity: 0.8;
				padding: 0 10rpx;
				position: absolute;
				top: 18rpx;
				left: 16rpx;
				z-index: 1;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.tys {
				position: absolute;
				border-radius: 8rpx;
				top: 300rpx;
				left: 16rpx;
				display: flex;
				align-items: center;
				z-index: 1;

				.txt {
					border-radius: 4rpx;
					width: 60rpx;
					height: 30rpx;
					padding: 5rpx;
					color: #FFF;
					background: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.txt:nth-child(2n) {
					background: #50E3C2;
					color: #FFF;
				}
			}
		}

		::v-deep .u-badge {
			right: 0;
			top: -10rpx;
		}

		.btoomm {
			margin: 30rpx auto;

			.jszc {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #C0C0C0;
				font-size: 32rpx;

				image {
					height: 65rpx;
					width: 65rpx;
					margin-right: 10rpx;
				}
			}

			.bah {
				color: #C0C0C0;
				font-size: 26rpx;
				text-align: center;
				margin-top: 20rpx
			}
		}
	}
</style>
